<template>
  <view class="goods-detail">
    <view class="flex mb30">
      <zm-image
        :src="obj.imageUrl"
        custom-style="width:134rpx;height:134rpx;margin-right:24rpx"
      ></zm-image>
      <view class="flex introduce">
        <view class="fb fs30">{{ obj.name }}</view>
        <view class="fs24 num">数量：{{ obj.number }}</view>
        <price
          :price="obj.sellPrice"
          unit-size="24"
          price-size="36"
          custom-class="fb"
          color="#FFB415"
        ></price>
      </view>
    </view>
    <template v-if="obj.package && obj.package.length > 0">
      <view class="fb fs26 mb25">商品包含</view>
      <scroll-view scroll-x>
        <view class="flex">
          <view
            class="goods-item mr20"
            v-for="(item, index) in obj.package"
            :key="index"
          >
            <zm-image
              :src="item.imageUrl"
              custom-style="width:172rpx;height:172rpx;margin-right:20rpx"
            ></zm-image>
            <view class="fb fs24 ell mt15 mb15 ml15 mr15">{{ item.name }}</view>
            <view class="num ml15">x{{ item.number }}</view>
          </view>
        </view>
      </scroll-view>
    </template>
  </view>
</template>

<script>
  import ZmImage from '@/commons/ZmImage'
  import Price from '@/components/Price'
  // import { callTelephone } from '@/utils/tools'
  export default {
    props: {
      customClass: {
        type: String
      },
      obj: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },
    components: {
      ZmImage,
      Price
    },
    data() {
      return {}
    },
    methods: {
      // call() {
      //   callTelephone(this.phone)
      // }
    }
  }
</script>

<style lang="scss" scoped>
  .goods-detail {
    padding: 30rpx;
    background: #fff;
    box-sizing: border-box;
    .introduce {
      flex-direction: column;
      justify-content: space-between;
      .num {
        color: #888;
      }
    }
    .goods-item {
      width: 174rpx;
      height: 260rpx;
      background: #ffffff;
      border: 1rpx solid #eaeaea;
      border-radius: 12rpx;
      .num {
        font-size: 22rpx;
        color: #ffb415;
      }
    }
  }
</style>
